<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增供应商</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/server.js" ></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
    </style>
</head>
<body>
<div id="div">
	<!--
		新增供应商：
			添加的供应商编码必须唯一，不能重复
	-->
	
    <h4>新增供应商</h4>
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="供应商编码" prop="proCode">
            <el-input v-model="addForm.proCode"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="proName">
            <el-input v-model="addForm.proName" ></el-input>
        </el-form-item>
		<el-form-item label="供应商详细描述" prop="proDesc">
			<el-input type="textarea"  v-model="addForm.proDesc" ></el-input>
		</el-form-item>
		
		<el-form-item label="供应商联系人" prop="proContact">
		    <el-input  v-model="addForm.proContact"></el-input>
		</el-form-item>
		<el-form-item label="联系电话" prop="proPhone">
		    <el-input v-model="addForm.proPhone" ></el-input>
		</el-form-item>
		<el-form-item label="地址" prop="proAddress">
		    <el-input type="textarea" v-model="addForm.proAddress"></el-input>
		</el-form-item>
		<el-form-item label="传真" prop="proFax">
		    <el-input v-model="addForm.proFax" ></el-input>
		</el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
            <el-button @click="resetForm('addForm')">清空</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                addForm: {
                    
                },
                rules: {
                    proCode: [{
                    	required: true,
                    	message: '请输入供应商编码',
                    	trigger: 'blur'
                    }],
                    proName: [{
                    	required: true,
                    	message: '请输入供应商名称',
                    	trigger: 'blur'
                    }]
                }
            },
        methods: {
            // 供应商编码唯一
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 发送请求：使用JSON格式传递数据
                        axios.post(
                            server_url + "/api/provider",
                            // 直接传递对象（axios会自动转为JSON）
                            {
                                proCode: this.addForm.proCode,
                                proName: this.addForm.proName,
                                proDesc: this.addForm.proDesc,
                                proContact: this.addForm.proContact,
                                proPhone: this.addForm.proPhone,
                                proAddress: this.addForm.proAddress,
                                proFax: this.addForm.proFax
                            },
                            // 指定请求头为JSON格式
                            {
                                headers: {
                                    'Content-Type': 'application/json'
                                }
                            }
                        ).then(resp => {
                            if (resp.data.code === 0) {
                                this.$message.success(resp.data.msg);
                                this.$refs[formName].resetFields();
                            } else {
                                this.$message.error(resp.data.msg);
                            }
                        }).catch(err => {
                            console.log(err);
                        });
                    }
                });
            },
            // 清空表单方法
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }

        }
        }
    );
</script>
</html>